<template>
	<view class="school p30">
		<view class="list">
			<view class="item" :class="item.id == schoolId ? 'active' : ''" v-for="item in list" :key="item.id" @click="changeSchool(item)">{{ item.departmentName }}</view>
			<view class="noData">没有更多数据了</view>
		</view>
		<view class="addVest dis" @click="addSchool"><up-icon name="plus" color="#fff" size="30rpx"></up-icon></view>
	</view>
</template>

<script setup>
import { getSchoolList2 } from '@/config/api.js';
import { ref } from 'vue';
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
const schoolId = ref(0);
onLoad((options) => {
	// console.log('options', options);
	schoolId.value = options.schoolId;
});
onShow(() => {
	getList();
});

const list = ref([]);
const getList = async () => {
	const res = await getSchoolList2();
	// console.log(res);
	if (res.code == 0) {
		list.value = res.data.list;
	}
};
const changeSchool = (item) => {
	const data = {
		schoolId: item.id,
		schoolName: item.departmentName
	};
	uni.setStorageSync('schoolInfo', JSON.stringify(data));
	uni.navigateBack({
		delta: 1
	});
};
const addSchool = () => {
	uni.navigateTo({
		url: `/admin/school/addSchool`
	});
};
</script>

<style lang="scss" scoped>
.school {
	width: 100%;
	.list {
		padding-top: 20rpx;
		width: 100%;
		.item {
			margin-bottom: 20rpx;
			line-height: 72rpx;
			text-align: center;
			background: #ffffff;
			border-radius: 16rpx;
			font-size: 28rpx;
			color: #4f77e0;
			border-radius: 10rpx;
		}
		.active {
			background: linear-gradient(44deg, #5384f7 0%, #5744e8 100%);
			color: #fff;
		}
	}
	.addVest {
		position: fixed;
		bottom: 50rpx;
		right: 30rpx;
		justify-content: center;
		align-items: center;
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		background-color: #01b3f8;
	}
}
</style>
<style>
page {
	background-color: #f7f7f7;
}
image {
	width: 100%;
	height: 100%;
}
.u-swipe-action-item__right__button__wrapper {
	background-color: #e63f31 !important;
}
.card {
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
}
.noData {
	padding-top: 30rpx;
	width: 100%;
	color: #999;
	text-align: center;
}
</style>
